<template>
	<view class="container">
		<!-- 统一的顶部区域 -->
		<view class="top-section">
			<!-- 轮播图作为背景 -->
			<view class="banner-container">
				<swiper
					v-if="banner_list && banner_list.length > 0"
					class="banner-swiper"
					circular
					:indicator-dots="true"
					:autoplay="true"
					interval="3000"
					duration="1000"
					indicator-color="rgba(255, 255, 255, 0.6)"
					indicator-active-color="#ffffff"
				>
					<swiper-item v-for="(bannerItem, index) in banner_list" :key="index">
						<view class="banner-item" @click="handleBannerClick(bannerItem, 'top')">
							<image :src="globalConfig.site_url + bannerItem.image" mode="aspectFill" class="swiper-img" @error="handleImageError"></image>
						</view>
					</swiper-item>
				</swiper>
				<view v-else class="banner-placeholder">
					<text>暂无轮播图数据</text>
				</view>
			</view>
			<!-- 品牌栏浮动在上方 -->
			<view class="brand-header">
				<view class="header-left" @click="handleBrandStoryClick">
					<image :src="globalConfig.site_url + topData.top_left" class="brand-icon"></image>
					<text class="brand-subtitle">{{ topData.top_left_content_title || '品牌故事' }}</text>
				</view>
				<view class="header-right">
					<text class="iconfont icon-more"></text>
					<text class="iconfont icon-scan"></text>
				</view>
			</view>
		</view>

		<!-- 功能区块 -->
		<view class="function-area">
			<view class="function-title">{{ globalConfig.site_name || '' }} - {{ globalConfig.site_name_en || '功能区域' }}</view>
			<view class="function-grid">
				<view class="function-item" v-for="item in type_list" :key="item.id" @click.stop="handleFunctionClick(item)">
					<image :src="globalConfig.site_url + item.image" mode="aspectFit" class="function-icon"></image>
					<view class="item-info">
						<view class="item-title">{{ item.name }}</view>
						<view class="item-desc">{{ item.desc }}</view>
						<view class="item-btn">去预定></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 常用工具 -->
		<view class="tools-section">
			<view class="section-title">常用工具</view>
			<view class="tools-grid">
				<!-- 左侧大区块（占两行） -->
				<view class="tool-item left-panel" @tap="handleFunVerify(tools[0])">
					<view class="coupon-card" style="flex-direction: row-reverse">
						<image :src="globalConfig.site_url + tools[0].image" mode="aspectFit" class="tool-icon large-icon" style="width: 160rpx; height: 160rpx"></image>
						<view class="coupon-info">
							<text class="tool-name">{{ tools[0].name }}</text>
							<text class="sub-text">{{ tools[0].desc }}</text>
						</view>
					</view>
				</view>

				<!-- 右侧顶部区块 -->
				<view class="tool-item right-top" @tap="handleFunVerify(tools[1])">
					<view class="coupon-card" style="display: flex">
						<image :src="globalConfig.site_url + tools[1].image" mode="aspectFit" class="tool-icon"></image>
						<view class="coupon-info">
							<text class="tool-name">{{ tools[1].name }}</text>
							<text class="sub-text">{{ tools[1].desc }}</text>
						</view>
					</view>
				</view>

				<!-- 右侧底部区块 -->
				<view class="tool-item right-bottom" @tap="handleFunVerify(tools[2])">
					<view class="coupon-card" style="display: flex">
						<image :src="globalConfig.site_url + tools[2].image" mode="aspectFit" class="tool-icon"></image>
						<view class="coupon-info">
							<text class="tool-name">{{ tools[2].name }}</text>
							<text class="sub-text">{{ tools[2].desc }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 中间轮播图 -->
		<view class="banner-center-container">
			<swiper
				v-if="banner_center_list && banner_center_list.length > 0"
				class="banner-swiper"
				circular
				:indicator-dots="true"
				:autoplay="true"
				interval="3000"
				duration="1000"
				indicator-color="rgba(255, 255, 255, 0.6)"
				indicator-active-color="#ffffff"
			>
				<swiper-item v-for="(bannerItem, index) in banner_center_list" :key="index">
					<view class="banner-item" @click="handleBannerClick(bannerItem, 'center')">
						<image :src="globalConfig.site_url + bannerItem.image" mode="aspectFill" class="swiper-img" @error="handleImageError"></image>
					</view>
				</swiper-item>
			</swiper>
			<view v-else class="banner-placeholder">
				<text>暂无轮播图数据</text>
			</view>
		</view>
		<!-- 搜索更多 -->
		<view class="search-more" @click="handleFunctionClick">
			<text>搜索更多门店 ></text>
			<text class="iconfont icon-right"></text>
		</view>
		<!-- 商家列表 -->
		<scroll-view class="scroll-area" scroll-y="true" @scrolltolower="loadMore" :refresher-enabled="false" :refresher-triggered="refreshing">
			<view class="store-list">
				<view class="store-item" v-for="(store, index) in storeList" :key="index" @click.stop="goReserve(store)">
					<!-- 商家图片 -->
					<view class="store-image">
						<image :src="globalConfig.site_url + store.image" mode="aspectFill" class="image"></image>
						<view class="brand-name">{{ store.title }}</view>
						<view class="slogan">{{ store.slogan }}</view>
					</view>

					<!-- 商家信息 -->
					<view class="store-info">
							<!-- 店铺营业状态 -->
						 <view class="business-status"> 
							<view class="status-dot" v-if="store.shop_status == 1"></view>
							<view class="status-dot status-dot-ccc" v-if="store.shop_status == 2"></view>
							<view class="status-dot status-dot-yellow" v-if="store.shop_status == 3"></view>
							<view class="status-dot status-dot-red" v-if="store.shop_status == 4"></view> 
							<view class="status-text" v-if="store.shop_status == 1">
								营业中
							</view>
							<view class="status-text status-text-ccc" v-if="store.shop_status ==2">
								试营业
							</view>
							<view class="status-text status-text-yellow" v-if="store.shop_status == 3">
								筹备中
							</view>
							<view class="status-text status-text-red" v-if="store.shop_status == 4">
								已打烊
							</view>
						</view>
						<!-- 标签 -->
						<view class="tags">
							<text class="tag" v-for="(tag, tagIndex) in store.type_list" :key="tagIndex">
								{{ tag }}
							</text>
						</view>

						<!-- 商家名称 -->
						<text class="store-name">{{ store.title }}</text>

						<!-- 距离信息 -->
						<view class="distance-info">
							<text class="distance">距离 {{ store.distance }}{{ store.address }}</text>
						</view>

						<!-- 营业时间 -->
						<view class="business-hours">
							<text class="hours">营业时间：{{ store.shop_time }}</text>
						</view>

						<!-- 操作按钮 -->
						<view class="action-buttons">
							<view class="action-btn" @click.stop="navigate(store)">
								<text class="btn-text">导航</text>
							</view>
							<view class="action-btn" @click.stop="makeCall(store)">
								<text class="btn-text">电话</text>
							</view>
							<view class="action-btn primary">
								<text class="btn-text primary-text">去预定</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-more" v-if="loading">
				<text class="loading-text">加载中...</text>
			</view>

			<view class="no-more" v-if="noMore">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</scroll-view>

		<!-- uView登录弹窗 (from shop-list.vue) -->
		<u-popup v-model="showLoginPopup" mode="center" border-radius="16" width="600rpx" :mask-close-able="true" @close="closeLoginPopup">
			<view class="login-popup">
				<view class="popup-header">
					<view class="popup-title">登录</view>
					<view class="popup-close" @click="closeLoginPopup">
						<u-icon name="close" color="#999" size="20"></u-icon>
					</view>
				</view>

				<view class="login-methods">
					<u-button
						type="success"
						shape="round"
						:loading="wechatLoading"
						@click="handleWechatLogin"
						:custom-style="{ backgroundColor: '#07c160', borderColor: '#07c160', marginBottom: '20rpx' }"
					>
						<u-icon name="weixin-fill" color="#fff" size="20" style="margin-right: 10rpx"></u-icon>
						{{ wechatLoading ? '登录中...' : '微信登录' }}
					</u-button>
				</view>

				<view class="login-tips">
					<u-checkbox v-model="agreePolicy" shape="circle" active-color="#007aff" :size="32" style="margin-right: 10rpx;" />
					<text class="tips-text">我已阅读并同意</text>
					<text class="link-text" @click="showPrivacy('agreement')">《用户协议》</text>
					<text class="tips-text">和</text>
					<text class="link-text" @click="showPrivacy('policy')">《隐私政策》</text>
				</view>
			</view>
		</u-popup>

		<!-- 活动弹窗组件 -->
		<activity-popup
			:visible="popupVisible"
			@close="closePopup"
			@select-category="handleCategorySelect"
			@initiate-activity="handleInitiateActivity"
			@navigate="handleNavigate"
		/>
	</view>
</template>

<script>
import request from '@/common/request.js';
import ActivityPopup from '../../components/activity-popup.vue';
import { mapGetters, mapActions, mapState } from 'vuex';
import { checkLoginStatus, wechatMiniLogin } from '@/common/auth.js';

export default {
	components: {
		ActivityPopup
	},

	data() {
		return {
			topData: {},
			tools: [],
			banner_list: [],
			popupVisible: false,
			type_list: [],
			banner_center_list: [],
			storeList: [],
			loading: false,
			refreshing: false,
			noMore: false,
			page: 1,
			pageSize: 10,
			// for login popup
			showLoginPopup: false,
			wechatLoading: false,
			afterLoginCallback: null, // Replace selectedStore with a generic callback
			isShopListLoaded: false, // Flag to prevent multiple loads
			agreePolicy: false // Add agreePolicy to data
		};
	},

	computed: {
		// 使用mapGetters获取全局状态
		...mapGetters(['getGaodeKey', 'getSiteName', 'getLocation']),

		// 使用mapState直接访问state
		...mapState({
			globalConfig: (state) => state.config,
			userLocation: (state) => state.location
		})
	},

	watch: {
		userLocation: {
			handler(newVal) {
				// 只要没加载过商店列表就请求（无论定位是否成功）
				if (!this.isShopListLoaded) {
					this.getShopList();
					this.isShopListLoaded = true;
				}
			},
			immediate: true, // Run the handler immediately on component mount
			deep: true // Watch for nested changes within the object
		}
	},

	async mounted() {
		try {
			// 确保配置已加载
			if (!this.globalConfig.site_url) {
				console.log('正在获取全局配置...');
				await this.$store.dispatch('fetchConfig');
				console.log('全局配置获取完成:', this.globalConfig);
			}

			// 获取页面数据
			await this.getData();
		} catch (error) {
			console.error('页面初始化失败:', error);
			uni.showToast({
				title: '页面加载失败',
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	},

	methods: {
		// 请求首页数据
		async getData() {
			try {
				uni.showLoading({
					title: '加载中'
				});

				const opts = {
					url: '/api/index/index',
					method: 'post',
					data: {}
				};

				console.log('开始请求首页数据...');
				const res = await request.httpRequest(opts);
				console.log('首页数据响应:', res);

				if (res && res.data && res.data.data) {
					const resData = res.data.data;
					this.banner_list = resData.banner_list || [];
					console.log('轮播图数据:', this.banner_list);
					console.log(
						'轮播图完整路径:',
						this.banner_list.map((item) => this.globalConfig.site_url + item.image)
					);

					this.type_list = resData.type_list || [];
					this.topData = resData.top || {};
					this.tools = resData.tools || [];
					// this.tools = resData.type_list || []
					this.banner_center_list = resData.banner_center_list || [];
				} else {
					console.warn('首页数据格式不正确:', res);
				}
			} catch (error) {
				console.error('获取首页数据失败:', error);
				uni.showToast({
					title: '获取数据失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},

		// 获取店铺列表
		async getShopList() {
			if (this.loading || this.noMore) return;
			this.loading = true;

			try {
				let latitude = 0;
				let longitude = 0;
				if (this.userLocation && typeof this.userLocation.latitude === 'number' && typeof this.userLocation.longitude === 'number') {
					latitude = this.userLocation.latitude || 0;
					longitude = this.userLocation.longitude || 0;
				}
				// 始终请求接口，未获取到经纬度时传0
				const url = `/api/index/getShopList?latitude=${latitude}&longitude=${longitude}`;

				const res = await request.httpRequest({
					url: url,
					method: 'GET'
				});

				if (res.data.code === 1 && res.data.data.list) {
					const newStores = res.data.data.list;
					if (newStores.length < this.pageSize) {
						this.noMore = true;
					}
					this.storeList = this.page === 1 ? newStores : [...this.storeList, ...newStores];
					this.page++;
				} else {
					this.noMore = true;
				}
			} catch (error) {
				console.error('获取商店列表失败:', error);
			} finally {
				this.loading = false;
				this.refreshing = false;
			}
		},

		// 下拉刷新
		async onRefresh() {
			this.refreshing = true;
			this.page = 1;
			this.noMore = false;

			try {
				await this.getShopList();
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				});
			} catch (error) {
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				});
			}
		},

		// 加载更多
		async loadMore() {
			if (this.loading || this.noMore) return;

			this.loading = true;
			this.page++;

			try {
				await this.getShopList();
			} catch (error) {
				this.page--; // 失败时回退页码
			}
		},

		// 导航
		navigate(shop) {
			console.log(shop);
			uni.openLocation({
				latitude: parseFloat(shop.lat),
				longitude: parseFloat(shop.lng),
				name: shop.title || '店铺',
				address: shop.address || ''
			});
		},

		// 拨打电话
		makeCall(shop) {
			if (!shop.mobile) {
				uni.showToast({
					title: '店铺电话不存在',
					icon: 'none'
				});
				return;
			}

			uni.makePhoneCall({
				phoneNumber: shop.mobile
			});
		},

		// 去预定 (with login check)
		async goReserve(store) {
			const isLoggedIn = await checkLoginStatus();
			if (isLoggedIn) {
				uni.navigateTo({
					url: `/pages/shop/shop-detail?id=${store.id}`
				});
			} else {
				// Store the navigation action in the callback
				this.afterLoginCallback = () => {
					uni.navigateTo({
						url: `/pages/shop/shop-detail?id=${store.id}`
					});
				};
				this.showLoginPopup = true;
			}
		},

		// 功能点击
		handleFunctionClick(item = {}) {
			console.log('点击功能项:', item);
			uni.navigateTo({
				url: `/pages/shop/shop-list?type=${item.id || 1}`
			});
		},

		// 常用工具点击
		async handleFunVerify(item) {
			const isLoggedIn = await checkLoginStatus();
			if (!isLoggedIn) {
				// Store the action to be performed after login
				this.afterLoginCallback = () => this.executeToolAction(item);
				this.showLoginPopup = true;
				return;
			}
			this.executeToolAction(item);
		},

		executeToolAction(item) {
			// Placeholder for the actual tool action logic
			// This might navigate to a new page or perform some other action
			console.log('Executing tool action for:', item);
			if (item.type == 1 && item.url) {
				uni.navigateTo({
					url: item.url
				});
			} else if (item.type == 1 && item.url) {
				uni.navigateToMiniProgram({
					appId: 'wx01733b92b18ca527', // 必填
					path:  item.url || 'pages/index/tabbar', // 目标页面路径
					extraData: { // 传递给目标小程序的数据
						foo: 'bar'
					},
					success(res) {
						console.log('跳转成功', res)
					},
					fail(err) {
						console.error('跳转失败', err)
					}
				})
			}else{
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			}
		},

		// 弹窗相关方法
		closePopup() {
			this.popupVisible = false;
		},

		handleCategorySelect(category) {
			console.log('选择分类:', category);
			uni.showToast({
				title: `选择了${category.title}`,
				icon: 'none'
			});
		},

		handleInitiateActivity(options) {
			console.log('发起活动:', options);
			uni.showToast({
				title: options?.custom ? '发起定制活动' : '发起活动',
				icon: 'none'
			});
		},

		handleNavigate(item) {
			console.log('导航到:', item);
			uni.showToast({
				title: `导航到${item.title}`,
				icon: 'none'
			});
		},

		// 处理图片加载错误
		handleImageError(e) {
			console.error('图片加载失败', e.detail.errMsg);
			const target = e.target || e.currentTarget;
			console.error('图片路径:', target.src);
			uni.showToast({
				title: '图片加载失败',
				icon: 'none'
			});
		},

		handleBrandStoryClick() {
			if (this.topData && this.topData.top_left_content) {
				const title = this.topData.top_left_content_title || '详情';
				const content = this.topData.top_left_content;
				uni.navigateTo({
					url: `/pages/common/rich-text?title=${encodeURIComponent(title)}&content=${encodeURIComponent(content)}`
				});
			}
		},

		async fetchInitialData() {
			try {
				const config = await this.$store.dispatch('fetchConfig');
				// ... existing code ...
			} catch (error) {
				console.error('初始化数据失败:', error);
				uni.showToast({
					title: '初始化数据失败',
					icon: 'none'
				});
			}
		},

		// --- Login Logic from shop-list.vue ---
		closeLoginPopup() {
			this.showLoginPopup = false;
			this.wechatLoading = false;
			this.afterLoginCallback = null; // Clear callback on close
		},

		async handleWechatLogin() {
			// 判断有没有勾选隐私
			if (!this.agreePolicy) {
				this.$u.toast('请先勾选同意《用户协议》和《隐私政策》');
				return;
			}
			if (this.wechatLoading) return;
			this.wechatLoading = true;
			try {
				const result = await wechatMiniLogin();
				if (result.success) {
					this.$store.dispatch('fetchUserInfoAction');
					this.closeLoginPopup();
					this.$u.toast('登录成功');

					if (this.afterLoginCallback) {
						this.afterLoginCallback();
						this.afterLoginCallback = null; // Clear after execution
					}
				} else {
					throw new Error(result.message || '登录失败');
				}
			} catch (error) {
				this.$u.toast(error.message || '登录操作失败');
			} finally {
				this.wechatLoading = false;
			}
		},

		showPrivacy(type) {
			const urlKey = type === 'policy' ? 'yszc_url' : 'yhxy_url';
			const title = type === 'policy' ? '隐私政策' : '用户协议';
			if (this.globalConfig && this.globalConfig[urlKey]) {
				uni.navigateTo({
					url: `/pages/common/webview?url=${encodeURIComponent(this.globalConfig[urlKey])}&title=${encodeURIComponent(title)}`
				});
			} else {
				this.$u.toast('协议地址未配置');
			}
		},

		handleBannerClick(item, type) {
			if (!item) return;
			const showData = item.show_data || item.type_data;
			if (showData == '1') {
				// 内部页面跳转
				const url = (item.pages && item.pages.url) || item.url;
				if (url) {
					uni.navigateTo({
						url
					});
				} else {
					// this.$u && this.$u.toast ? this.$u.toast('页面地址未配置') : uni.showToast({
					// 	title: '页面地址未配置',
					// 	icon: 'none'
					// });
				}
			} else if (showData == '2') {
				// 外部H5
				if (item.url) {
					uni.navigateTo({
						url: `/pages/common/webview?url=${encodeURIComponent(item.url)}`
					});
				} else {
					// this.$u && this.$u.toast ? this.$u.toast('外部链接未配置') : uni.showToast({
					// 	title: '外部链接未配置',
					// 	icon: 'none'
					// });
				}
			} else {
				this.$u && this.$u.toast
					? this.$u.toast('未配置跳转类型')
					: uni.showToast({
							title: '未配置跳转类型',
							icon: 'none'
					  });
			}
		}
	}
};
</script>

<style lang="scss">
.container {
	background-color: #fff;
}

.top-section {
	position: relative;
	height: 480rpx;
	/* User request: Adjust height */
}

.brand-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* To push left and right apart */
	padding: 20rpx 30rpx;
	// background-color: #ccc; /* Key change: was #fff */
	padding-top: 118rpx;
	/* Keep for status bar */

	.header-left,
	.header-right {
		background-color: #fcfcfc;
		border-radius: 40rpx;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.brand-icon {
		width: 80rpx;
		height: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.brand-subtitle {
		font-size: 24rpx;
		color: #333;
		/* Key change: was #666 */
		margin-left: 20rpx;
		/* Remove background from here as it's now on the parent */
		padding: 0;
		background-color: transparent;
	}

	.header-right {
		// margin-left: auto; /* Replaced by justify-content on parent */
		.iconfont {
			font-size: 40rpx;
			color: #fff;
			/* Key change: was default */
		}

		.iconfont + .iconfont {
			margin-left: 30rpx;
		}
	}
}

.banner-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 480rpx;
	/* Use explicit height to fix rendering issue */
	z-index: 1;
	/* Removed all original styles like padding, bg-color */
}

.banner-swiper {
	width: 100%;
	height: 100%;
	border-radius: 0;
	/* Swiper is background, so no radius */
	overflow: hidden;
}

.banner-item {
	width: 100%;
	height: 100%;
}

.swiper-img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	/* Image fills swiper, no radius */
}

.banner-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f6fa;
	border-radius: 0;
	color: #999;
	font-size: 28rpx;
}

.function-area {
	margin: 20rpx;
	background: linear-gradient(to bottom, #d9d9d9, #f5f5f5 50%, #fff 100%);
	// background-color: #f9f9f9;

	border-radius: 12rpx;
	padding: 10rpx;
	margin-top: -50rpx;
	width: calc(100% - 40rpx);
	position: absolute;
	top: 510rpx;
	left: 0rpx;
	z-index: 2;

	.function-title {
		font-size: 28rpx;
		font-weight: bold;
		margin: 20rpx 0rpx;
		color: #4080ff;
	}

	.function-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.function-item {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background-color: #fff;
		border-radius: 12rpx;
		// 阴影
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}

		.item-info {
			flex: 1;
			text-align: center;

			.item-title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.item-desc {
				font-size: 22rpx;
				color: #999;
				padding: 10rpx 0;
			}
		}

		image {
			width: 130rpx;
			height: 130rpx;
			margin-right: 0rpx;
			margin-left: 10rpx;
			border-radius: 50%;
		}

		.item-info {
			flex: 1;
			text-align: left;
			margin-left: 20rpx;

			.item-title {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.item-btn {
			font-size: 24rpx;
			color: #4080ff;
			background-color: none;
			border-radius: 30rpx;
		}
	}
}

.tools-section {
	margin: 20rpx;
	margin-top: 400rpx;

	.section-title {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.tools-grid {
		display: grid;

		grid-template-columns: 1fr 1fr;

		grid-template-rows: 120rpx 120rpx;
		/* 使用rpx定义行高 */
		gap: 32rpx;
		// padding: 24rpx;
		height: 100%;
	}

	.left-panel {
		grid-row: 1 / 3;
		grid-column: 1;
	}

	.right-top {
		grid-row: 1;
		grid-column: 2;
	}

	.right-bottom {
		grid-row: 2;
		grid-column: 2;
	}

	.coupon-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
		height: 100%;
		display: flex;
		flex-direction: inherit;
		align-items: center;
		justify-content: center;
		text-align: center;

		.coupon-info {
			margin-top: 10rpx;
			display: flex;
			flex-direction: column;
		}
	}

	.coupon-card:first-child {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
		height: 100%;
		display: flex;
		flex-direction: inherit;
		align-items: center;
		justify-content: center;
		text-align: center;

		.coupon-info {
			margin-top: 10rpx;
		}
	}

	.large-icon {
		width: 160rpx;
		/* 左侧大图标 */
		height: 160rpx;
		// margin-bottom: 24rpx;
	}

	.tool-icon {
		width: 80rpx;
		height: 80rpx;
		// margin-bottom: 24rpx;
		text-align: center;
		// margin: 0 auto;
		margin-right: 20rpx;
	}

	.tool-name {
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}

	.sub-text {
		font-size: 24rpx;
		color: #999;
	}
}

.search-more {
	margin: 20rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	font-size: 28rpx;
	border: 1rpx solid #000;

	.icon-right {
		margin-left: 10rpx;
		font-size: 24rpx;
	}
}

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #666;

		&.active {
			color: #4080ff;
		}

		.iconfont {
			font-size: 40rpx;
			margin-bottom: 4rpx;
		}
	}
}

/* 滚动区域 */
.scroll-area {
	flex: 1;
	padding: 0 20rpx;
	padding-bottom: 150rpx;
}

/* 商家列表 */
.store-list {
	padding: 20rpx 0;
}

.store-item {
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	display: flex;
	position: relative;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 商家图片 */
.store-image {
	width: 200rpx;
	height: 280rpx;
	border-radius: 15rpx;
	overflow: hidden;
	position: relative;
	margin-right: 30rpx;
}

.image {
	width: 100%;
	height: 100%;
}

.brand-name {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	right: 20rpx;
	color: #fff;
	font-size: 24rpx;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 10rpx;
	padding: 10rpx;
}

.slogan {
	position: absolute;
	bottom: 20rpx;
	left: 20rpx;
	right: 20rpx;
	color: #fff;
	font-size: 22rpx;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 10rpx;
	padding: 8rpx;
}

/* 商家信息 */
.store-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* 标签 */
.tags {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
}

.tag {
	background-color: #007aff;
	color: #fff;
	font-size: 22rpx;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}

/* 商家名称 */
.store-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
	line-height: 1.4;
}

/* 距离信息 */
.distance-info {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.distance {
	color: #666;
	font-size: 26rpx;
}

/* 营业时间 */
.business-hours {
	margin-bottom: 15rpx;
}

.hours {
	color: #666;
	font-size: 26rpx;
}

/* 特殊标签 */
.special-tag {
	margin-bottom: 20rpx;
}

.special-text {
	background-color: #ffe4e1;
	color: #ff6b6b;
	font-size: 22rpx;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	gap: 20rpx;
	margin-top: auto;
}

.action-btn {
	flex: 1;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	padding: 20rpx;
	text-align: center;
}

.action-btn.primary {
	background-color: #007aff;
}

.btn-text {
	font-size: 26rpx;
	color: #333;
}

.primary-text {
	color: #fff;
}

/* 营业状态 */
.business-status {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	display: flex;
	align-items: center;
}

.status-dot {
	width: 12rpx;
	height: 12rpx;
	background-color: #00c851;
	border-radius: 50%;
	margin-right: 8rpx;
}

.status-text {
	color: #00c851;
	font-size: 22rpx;
}

/* 加载状态 */
.loading-more,
.no-more {
	text-align: center;
	padding: 40rpx;
}

.loading-text,
.no-more-text {
	color: #999;
	font-size: 26rpx;
}

/* 底部导航 */
.bottom-nav {
	background-color: #fff;
	display: flex;
	border-top: 1rpx solid #eee;
	padding: 20rpx 0;
}

.nav-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
}

.nav-text {
	font-size: 24rpx;
	color: #999;
}

.nav-text.active {
	color: #007aff;
}

.login-popup {
	padding: 30rpx;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.login-methods {
		margin-bottom: 40rpx;
	}

	.login-tips {
		font-size: 24rpx;
		color: #999;
		text-align: center;

		.link-text {
			color: #007aff;
			margin: 0 4rpx;
		}
	}
}

.banner-center-container {
	height: 320rpx;
	min-height: 320rpx;
	margin: 20rpx;
	position: relative;
	z-index: 1;
	background: #f5f6fa;
	border-radius: 16rpx;
	overflow: hidden;
	/* border: 2px solid #f00; // 调试用，已去除 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-center-container .banner-swiper,
.banner-center-container .banner-item,
.banner-center-container .swiper-img {
	width: 100%;
	height: 320rpx;
	min-height: 320rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 营业状态 */
.business-status {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
}



.status-dot {
	width: 12rpx;
	height: 12rpx;
	background-color: #007AFF;
	border-radius: 50%;
	margin-right: 8rpx;
}

.status-text {
	color: #007AFF;
	font-size: 22rpx;
}


.status-dot-red {
	background-color: #ff4757;
}

.status-dot-yellow {
	background-color: #ffc107;
}

.status-dot-ccc {
	background-color: #ccc;
}

.status-text-red {
	color: #ff4757;
}

.status-text-yellow {
color: #ffc107;
}

.status-text-ccc {
	color: #ccc;
}
</style>
